<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>GOWN.layout example: nested layouts, recursive layouting</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000000;
        }
    </style>
    <script src="../../lib/pixi/pixi.js"></script>
    <script src="../../dist/gown.js"></script>
</head>
<body>
<script>
    var renderer = PIXI.autoDetectRenderer(800, 600,{backgroundColor : 0xffffff});
    document.body.appendChild(renderer.view);
    var stage = new PIXI.Container();

    var max_depth = 6;
    var max_children = 4;

    // you might want to take a look at pixi-shapes for a list of predefined
    // shapes, but to keep this as an independent example
    function Rect(color, parent) {
        PIXI.Graphics.call(this);
        parent = parent || stage;
        this.percentWidth = 100;
        this.percentHeight = 100;
        this.color = color;
        parent.addChild(this);
    }

    Rect.prototype = Object.create( PIXI.Graphics.prototype );
    Rect.prototype.constructor = Rect;

    Rect.prototype.redraw = function() {
        this.beginFill(this.color);
        this.drawRect(0, 0, this._width, this._height);
    }

    Rect.prototype._updateTransform = PIXI.Container.prototype.updateTransform;

    Rect.prototype.updateTransform = function() {
        this._updateTransform();
        this.redraw();

    };

    function addChildren(parent, depth, hor) {
        parent = parent || stage;
        depth = depth || 0;

        if (depth >= max_depth) {
            return;
        }

        for(var i = 0; i < Math.random()*max_children+1; i++) {
            parent.addChild(new Rect(0xffffff * Math.random(), parent));
        }


        var layout;
        if (hor) {
            layout = new GOWN.layout.HorizontalLayout();
        } else {
            layout = new GOWN.layout.VerticalLayout();
        }
        parent.layout = layout;

        var container = new PIXI.Container();
        container.percentWidth = 100;
        container.percentHeight = 100;
        parent.addChild(container);
        addChildren(container, depth+1, !hor);


    }

    stage.width = 800;
    stage.height = 600;
    addChildren();

    stage.layout.layoutContainer(stage);

    renderer.render(stage);
</script>

</body>
</html>
